{% extends 'user/base.html' %}
{% block title %}
    <title>个人信息页面</title>
{% endblock %}
{% block extendcss %}
    <link rel="stylesheet" href="{{ url_for('static',filename ='front/css/userInfo.css') }}">
    <!-- navbar透明 -->
    <style>
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.7) !important; /* 半透明背景 */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            backdrop-filter: saturate(180%) blur(20px);
        }

    </style>
{% endblock %}

{% block content %}
    {#   故事背景大图#}
    <section class="slice pt-lg-3 pb-2 bg-section-secondary" id="story_bg">
        <div class="container-fluid img-top">
            <img style="width:100% ;height: 50px;" src="{{ url_for('static',filename ='front/images/story/story-bg.jpg') }}"
                 alt="故事背景大图">
        </div>
    </section>
    <section class="slice pt-2 bg-surface-secondary">
        <div class="container mt-4 mb-5 pl-6  ">
        <div class="row">
            <div class="col col-md-3 mb-sm-4">
                <div class="col col-md12">
                    <div class="card-header pb-2 list-group-item-info">
                        个人信息
                    </div>
                    <ul class="list-group list-group-flush" id="myList">
                        <li class="list-group-item" style="background-color: #cefaff;"><a href="{{ url_for('users.userInfo') }}" class="link-primary">个人资料</a></li>
                        <li class="list-group-item"><a href="{{ url_for('address.address_management') }}" class="link-primary">地址管理</a></li>
                        <li class="list-group-item"><a href="{{ url_for('user.order_management') }}" class="link-primary">订单管理</a></li>
                        <li class="list-group-item">
                            <a href="{{ url_for('story.upload_story') }}" class="link-primary">上传故事管理</a>
                        </li>
                    </ul>
                    <div class="card-footer pb-2 list-group-item-info">
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="col col-md-8 col-sm-12 ml-2 p-5 resume_box_body">
                <div class="col col-md12">
                    <h5 class="font-weight-bold border-bottom pb-2"><span>个人资料</span></h5>
                    <form class="form-sample" id="form" enctype="multipart/form-data">
                        <p class="card-description">
                            Personal info
                        </p>
                        <div class="row justify-content-between">
                            {#                            左边部分#}
                            <div class="col col-md-6 col-sm-6">
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label" >姓名</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="username" value="{{ user.username }}" placeholder="请输入姓名">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">年龄</label>
                                    <div class="col-sm-9">
                                        <span type="text" class="form-control" >{{ user.age }}</span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">性别</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" name="sex">
                                            <option value="男" {% if user.sex == '男' %}selected{% endif %}>男</option>
                                            <option value="女" {% if user.sex == '女' %}selected{% endif %}>女</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">电话号</label>
                                    <div class="col-sm-9">
                                        <input type="tel" class="form-control" name="phone" value="{{ user.phone }}" placeholder="请输入电话号码">
                                    </div>
                                </div>
                            </div>
                            {#                            右边部分#}
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group pb-2 text-center">
                                        <span class="def_avatar1">
                                            <img class="def_avatar img-thumbnail" src="{{ user.avatar}}" alt="用户头像"
                                            data-original="{{  user.avatar }}"
                                            >
                                        </span>
                                       <input type="file" id="img" name="file" class="f3" >
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 pr-0 col-form-label">出生日期</label>
                                    <div class="col-sm-9">
                                        <input type="date" class="form-control" name="birthday" value="{{ user.birthday }}" placeholder="年/月/日">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 pr-0 col-form-label">修改密码</label>
                                    <div class="col-sm-9">
                                        <input id="password" type="password" name="password" maxlength="18" value="{{ user.password }}" class="form-control">
                                        <span id="toggle-password" class="btn-link showpwd">显示密码</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label">所在地</label>
                                    <input type="text" class="col-md-10 form-control" name="address" value="{{ user.address }}" style="margin-left: -17px" placeholder="请输入地址">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label">自我介绍</label>
                                    <textarea class="col-md-10 form-control textarea" name="description" placeholder="请输入自我介绍">{{ user.description }}</textarea>
                                </div>
                            </div>
                        </div>
                        {#                修改#}
                        <div class="col-md10">
                            <div class="text-center">
                                <button class="btn btn-primary " type="reset">取消修改</button>
                                <button class="btn btn-primary " type="submit">完成修改</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </section>
    <div id="totop" class="to-top">
    </div>
{% endblock %}
{% block extendjs %}
    <script>
        // 上传头像
        document.querySelector('#img').onchange = function () {
            const file = this.files[0]; // 获取第一个文件
            if (file) {
                document.querySelector('.def_avatar').src = URL.createObjectURL(file)
                console.log(this.files[0])
            }
        };
        // 显示隐藏密码
        document.addEventListener('DOMContentLoaded', function() {
        const passwordInput = document.getElementById('password');
        const toggleButton = document.getElementById('toggle-password');

        toggleButton.addEventListener('click', function(e) {
            e.preventDefault();
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleButton.textContent = '隐藏密码';
            } else {
                passwordInput.type = 'password';
                toggleButton.textContent = '显示密码';
            }
        });
        });
        // 请求用户信息
        const form = document.getElementById('form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(form);
            fetch('/user/update', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                const data = response.json()
                console.log('response', data);
                return data
            })
            .then(data => {
                if (data.code === 200) {
                    alert(data.message)
                    console.log('成功!',data);
                    // 调用函数更新用户信息
                    window.location.href = '/userInfo';  // 重定向到用户信息页面
                } else {
                    alert(data.message)
                    console.log('失败',data.data);  // 处理错误消息
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });

        // 重置按钮——重置个人信息头像
        document.querySelector('button[type="reset"]').addEventListener('click', function(event) {
            let avatar = document.querySelector('.def_avatar');
            avatar.src = avatar.dataset.original
        });

    </script>
{% endblock %}